<template>
  <div class="login-box">
    <a-card class="login-card" hoverable>
      <a-form ref="loginRef" :model="formState" :rules="rules">
        <a-row gutter="4">
          <a-col span="24">
            <div class="login-card-img">
              <img src="@/assets/glasses.png" style="width: 100px; height: 100px;" />
              <h1 style="display: flex; align-items: center;">眼镜店系统</h1>
            </div>
          </a-col>
          <a-col span="24">
            <a-form-item name="loginName">
              <a-input size="large" v-model:value="formState.loginName" placeholder="请输入登录名！" />
            </a-form-item>
          </a-col>
          <a-col span="24">
            <a-form-item name="userPwd">
              <a-input-password size="large" v-model:value="formState.userPwd" placeholder="请输入密码！" />
            </a-form-item>
          </a-col>
          <a-col span="24">
            <a-form-item>
              <a-button type="primary" size="large" @click="handleClick" style="width: 100%;">登录</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { validate } from '@/api/user/index'

const router = useRouter()
const formState = ref({})
const rules = ref({
  loginName: [{ required: true, message: '请输入登录名！' }],
  userPwd: [{ required: true, message: '请输入密码！' }]
})
const loginRef = ref()

const handleClick = () => {
  loginRef.value.validate().then(() => {
    validate(formState.value).then((res) => {
      if (res.code === 0) {
        sessionStorage.setItem('Access-Token', res.data)
        router.push({ name: 'dashboard' })
      } else {
        message.error(res.message)
      }
    })
  })
}
</script>
<style scoped>
.login-box {
  width: 100%;
  height: 100vh;
  /*设置颜色渐变 方向(0deg垂直向上) 起点颜色 终点颜色*/
  background-image: linear-gradient(45deg, #5bc2e1, #bcbec8);
  /*过度效果  property duration timing-function delay 默认属性:all 0 ease 0*/
  transition: 0.4s;
}

.login-card {
  width: 30%;
  height: 40%;
  margin-left: 35%;
  top: 30%;
  border-width: 1px;
  border-style: solid;
}

.login-card-img {
  display: flex;
  float: left;
}
</style>